<template>
  <a-drawer
    title="修改"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="userEditVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='建议' v-bind="formItemLayout" :validateStatus="validateStatus">
        <a-textarea disabled :autosize="{minRows: 5}" v-decorator="['content',{rules: [{ required: true, message: '内容不能为空'}]}]"
                    v-model="user.content"/>
      </a-form-item>
      <a-form-item label='回复' v-bind="formItemLayout" :validateStatus="validateStatus">
        <a-textarea :autosize="{minRows: 5}" v-decorator="['replayContent',{rules: [{ required: true, message: '内容不能为空'}]}]"
                    v-model="user.replayContent"/>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 3},
    wrapperCol: {span: 18}
  }
  export default {
    name: 'UserAdd',
    props: {
      userEditVisiable: {
        default: false
      }
    },
    data() {
      return {
        user: {
          id: '',
          content: '',
          createTime: '',
          replayContent: ''
        },
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        validateStatus: '',
        help: '',
        file: ''
      }
    },
    methods: {
      reset() {
        this.validateStatus = ''
        this.help = ''
        this.loading = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      setFormValues({...user}) {
        console.log(user)
        this.user = user
        let fields = ['content', 'replayContent']
        Object.keys(user).forEach((key) => {
          if (fields.indexOf(key) !== -1) {
            this.form.getFieldDecorator(key)
            let obj = {}
            obj[key] = user[key]
            this.form.setFieldsValue(obj)
          }
        })
        if (user.image) {
          this.user.image = [user.image]
        }
      },
      handleSubmit() {
        let user = this.form.getFieldsValue()
        user.id = this.user.id
        // user.createTime = this.user.createTime
        this.loading = true
        this.$put('suggest', {
          ...user
        }).then((r) => {
          this.reset()
          this.$emit('success')
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>
